<template>
  <div class="main scrollbar" style="height: calc(100% - 80px)">
    <div style="text-align:center;padding:10px">
      <el-button type="success" @click="$parent.dialogGetDataSourceVisible = true">
        <i class="el-icon-plus"></i>&nbsp;&nbsp;获取数据源
      </el-button>
    </div>
    <ul>
      <!-- 表id+表头下标作为标记 -->
      <li v-for="(item,index) in datas" class="tables">{{item.name}}
        <el-checkbox-group v-model="selectValue" @change="datasChanged">
          <ul class="data-group">
            <li v-for="(ii,index2) in item.theads" draggable="true" v-on:dragstart="drag($event,{index:item.id+'.'+index2,name:ii})">
              <div class="tableName">{{ii}}</div>
              <!-- <el-checkbox :label="item.id+'.'+index2" @change="dataChanged(item.id+'.'+index2)">{{ii}}</el-checkbox> -->
            </li>
          </ul>
        </el-checkbox-group>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['dashboard', 'datas', 'canvasItem'],
  data() {
    return {
      selectValue: [],
    }
  },
  created: function() {

  },
  computed: {
    element: function() {
      let element = this.canvasItem
      if (!element) {
        return ''
      }
      element.data = _.uniq(element.axis.concat(element.value), 'index')
      return element
    },
  },
  methods: {
    drag: function(event, obj) {
      window.console && console.log(obj);
      this.$parent.dragObj = obj
    },
    datasChanged() {
      // this.$emit('datasChanged', this.selectValue)
    },
    dataChanged(v) {
      // let checked = this.selectValue.find((n) => n == v) ? true : false
      // this.$emit('dataChanged', {
      //   v: v,
      //   checked: checked
      // })
    },
  },
  components: {},
  watch: {
    element: function(val) {
      this.selectValue = (val && val.data) ? val.data : []
    }
  }
}
</script>
<style lang="less" scope>
.main {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  // height: calc(~"100% - 80px");
  .tables {
    margin-bottom: 10px;
    .el-checkbox__label,
    .tableName {
      font-size: 12px;
      line-height: 24px;
      cursor: pointer;
    }
  }
  .el-checkbox {
    color: #fff;
  }
  .el-checkbox__inner {
    width: 12px;
    height: 12px;
  }
  .el-checkbox-group,
  .tableName {
    text-indent: 10px;
  }
}

.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #a3afb3;
}
</style>
